<template>
  <el-form ref="form">
    <div style="float: left;font-size: 18px;width: 100%;text-align: left;margin-bottom: 15px;">营销单元</div>

    <div style="text-align: center">
      <div style="float: left;font-size: 18px;width: 100%;margin-bottom: 15px;">请选择省</div>
      <el-select v-model="form[0].provinceId" placeholder="请选择省" style="margin:10px 15px"  @change="onChange($event,index)">
        <el-option :label="item.province" :value="item.provinceId" v-for="(item,index) in province_list" :key="index"></el-option>
      </el-select >
    </div>

    <el-form-item>
      <div v-for="(item,index) in form"   style="text-align: center">

        <el-select v-model="item.cityId" placeholder="请选择市" style="margin:10px 15px">
          <el-option :label="item3.city" :value="item3.cityId" v-for="(item3,index3) in item.cities" :key="index3"></el-option>
        </el-select >
<!--        <el-input v-model="item.marketing"  placeholder="营销单元"  style="width:20%;"></el-input>-->
<!--        <el-button type="primary"  v-if="index==0" style="margin-left:20px;" @click="addOne()">添 加</el-button>-->
<!--        <el-button type="danger"   v-else style="margin-left:20px;" @click="delOne(index)">删 除</el-button>-->

        <div style="width: 100%;margin:8px 0"></div>
        <div v-for="(item2,index2) in item.marketing" style="width: 100%;display: inline">
          <el-input v-model="item2.marketing" placeholder="营销单元" style="width:15%;margin-right: 10px;"></el-input>
          <el-button type="primary"  v-if="index2==0" style="margin:0 10px;" @click="addOne2(index,index2)">✚</el-button>
          <el-button type="danger"   v-else style="margin:0 10px;" @click="delOne2(index,index2)">—</el-button>
          <!--<div style="width: 100%;margin:10px 0"></div>-->
        </div>
        <div style="width: 100%;height:10px;margin-bottom:30px"></div>
      </div>

    </el-form-item>

    <el-divider></el-divider>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form-item>

  </el-form>
</template>

<script>
import { EventBus } 	 from 	"bus/mybus.js";
import {getProvinceData,getCityData,getYxData, doYxUpdate} from "../../crm/system/custom";

export default {
  name: "CustomYx",
  data(){
    return {
      form: [{
        marketing:[],
        cityName:'',
        cities:[],
        provinceName:'',
        cityId:'',
        provinceId:'',
      }],
      province_list:[],
      citys:[],
    }
  },
  created(){
      this.getRequestData()
  },

  methods:{

    getRequestData(){
      const payload       = {}
      payload.operatorId  = this.$store.state.operatorId
      getProvinceData(payload).then(res=>{
        this.province_list = res
      }).catch(err=>{
        EventBus.$emit('closeloading')
      })


      //获取营销数据
      payload.provinceId =1
      getYxData(payload).then(res=>{
        this.form= res.marketing
        console.log(this.form)
      }).catch(err=>{
        EventBus.$emit('closeloading')
      })

    },


    getCitys(index){
      const payload       = {}
      payload.operatorId  = this.$store.state.operatorId
      payload.provinceId  = index
      getCityData(payload).then(res=>{
        this.citys = res.cities
      }).catch(err=>{
        EventBus.$emit('closeloading')
      })
    },

    //省值 变化 联动市值
    onChange(event,index){
      const payload       = {}
      payload.operatorId  = this.$store.state.operatorId
      payload.provinceId  = event
      this.getCitys(event)
      getYxData(payload).then(res=>{
        if(res.marketing.length==0){
          this.form =[{
            marketing:[{}],
            cityName:'',
            cities:this.citys,
            provinceName:'',
            cityId:'',
            provinceId:event,
          }]

        }else{
          this.form= res.marketing
        }

      }).catch(err=>{
        EventBus.$emit('closeloading')
      })
    },

    //新增管理区域..
    addOne(){
      const arr ={cities:this.form[0].cities,marketing:[{}]}
      this.form.push(arr)
    },
    //删除管理区域..
    delOne(index){
      this.form.splice(index,1)
    },

    addOne2(index,index2){
      this.form[index].marketing.push({})
    },
    //删除管理区域..
    delOne2(index,index2){
      this.form[index].marketing.splice(index2,1)
    },
    //提交
    onSubmit() {

      this.$confirm('确认提交操作??', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const payload       = {}
        payload.operatorId  = this.$store.state.operatorId
        payload.provinceId  = this.form[0].provinceId;
        payload.marketing   = this.form

        doYxUpdate(payload).then(res=>{
          this.$message.success('操作成功')
        }).catch(err=>{
          EventBus.$emit('closeloading')
        })
      }).catch(() => {});

    },


  },

  computed:{
    //获取区域数据..
    getRegionArr(){
      let manageArea = []
      this.region.forEach(e=>{
        const item = {}
        item.provinceId = e.list[0]
        item.cityId = e.list[1]
        manageArea.push(item)
      })
      return manageArea
    },

  }
}
</script>

<style scoped>
.el-select:hover .el-input__inner {
  border-color: #C0C4CC;
  /* margin-right: 10px; */
}
</style>